<template>
  <div class="wrapper">
    <ul class="alphabet-list">
      <li class="alphabet" v-for="(city,letter) of cities" :key="letter" @click="clickLetter">{{letter}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Alphabet',
  props: {
    cities: Object
  },
  methods: {
    clickLetter (e) {
      this.$emit('handlerLetter', e.target.innerText)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper
    display: flex
    flex-direction: column
    justify-content: center
    position absolute
    right .1rem
    height 100%
    color #00bcd4
    .alphabet
      text-align center
      font-size .3rem
      margin .1rem 0
</style>
